<script setup>
import { ref, defineExpose } from 'vue';
import { useDocumentStore } from "@/stores/documentStore.js";

const documentStore = useDocumentStore();
const visible = ref(false);
const currentDocId = ref(null);

const show = (docId) => {
  currentDocId.value = docId;
  documentStore.getDocumentDetail(docId);
  visible.value = true;
};

defineExpose({
  show
});
</script>

<template>
  <el-dialog v-model="visible" title="文档详情" width="80%">
    <div v-if="documentStore.documentDetail">
      <h3>{{ documentStore.documentDetail.documentTitle }}</h3>
      <div class="doc-meta">
        <span>案件ID: {{ documentStore.documentDetail.caseId }}</span>
        <span>状态: {{ documentStore.documentDetail.status }}</span>
        <span>版本: v{{ documentStore.documentDetail.currentVersion }}</span>
      </div>

      <div class="doc-content" v-html="documentStore.documentDetail.documentContent"></div>
    </div>
    <div v-else>
      <el-skeleton :rows="10" animated />
    </div>
  </el-dialog>
</template>

<style scoped>
.doc-meta {
  margin-bottom: 20px;
  color: #666;
}
.doc-meta span {
  margin-right: 15px;
}
.doc-content {
  border: 1px solid #eee;
  padding: 20px;
  min-height: 300px;
}
</style>